export default [
  {
    title: '属性值的计算过程'
  },
  {
    title: '样式来源',
    order: true,
    words: [
      '作者样式表（开发者编写的样式）',
      '浏览器样式表（浏览器预设样式，如div的 display: block 是浏览器预设样式）',
      '默认样式（又叫初始样式，如 display: initial 是取初始样式）'
    ]
  },
  {
    title: 'CSS权重计算'
  },
  {
    title: '1. CSS权重计算——比较重要性',
    order: true,
    words: [
      '作者样式表中的 !important 样式 (权重 infinite，这里的infinite小于 infinite + 1)',
      '作者样式表中的普通样式',
      '浏览器样式表中的样式 user agent'
    ]
  },
  {
    title: '2. CSS权重计算——比较特殊性',
    words: [
      '通过选择器计算出一个5位数：x x x x x',
      '万位：内联样式，有记做1',
      '千位：id选择器数量',
      '百位：【类选择器、属性选择器、伪类选择器】数量',
      '十位：【元素选择器、伪元素选择器】数量',
      '个位：通配符比任何选择器权重都低, 记做0'
    ]
  },
  {
    title: '3. CSS权重计算——比较源次序',
    words: [
      '代码书写靠后的胜出',
      '浏览器解析靠后的胜出',
      '浏览器从上到下解析css代码，还要考虑css文件加载的顺序，style标签内样式的顺序等',
      '注意: 由于一般情况下css源次序的管理比较混乱，而且互相覆盖的方式比较隐晦',
      '最好不要利用源次序的方式覆盖原有样式'
    ]
  },
  {
    title: '至此我们已经知道了浏览器是如何处理样式冲突的',
    words: [
      '知道这些就够了吗？'
    ]
  },
  {
    title: '浏览器的渲染过程',
    order: true,
    words: [
      '从树的根节点(html)开始到文档树的叶子节点深度优先遍历的顺序依次进行渲染',
      '一个元素一个元素依次渲染，顺序按照页面文档从上到下依次进行',
      '渲染每一个元素的前提条件：该元素的所有CSS属性必须有值'
    ]
  },
  {
    words: [
      '一个元素，从所有属性都没有值，到所有属性都有值',
      '这个计算过程，叫做属性值的计算过程'
    ]
  },
  {
    title: '特殊的CSS取值：',
    words: [
      'inherit ：手动继承，将父元素的值取出应用到该元素',
      'initial ：初始值，将该属性设置为默认值'
    ]
  },
  {
    title: 'The End',
    words: [
      '下次分享内容：堆叠上下文（stack context）'
    ]
  }
]